@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/goods/details.css')}}">
@section('content')
<div class="main" id="details" v-cloak>
    <div class="details_header">
        <div class="detail-left">
            <div class="details_header_swiper">
                <div class="swiper-container gallery-top swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <div v-for="item in goodsDetials.images" class="swiper-slide" :style="{backgroundImage:'url('+item+')'}" style="background-size: 100% 100%;"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div v-for="item in goodsDetials.images" class="swiper-slide" :style="{backgroundImage:'url('+item+')'}" ></div>
                    </div>
                </div>

            </div>
            <div class="details_header_mes">
                <div>
                    <p class="details_name">@{{goodsDetials.title}} </p>
                    <p class="detailPrice" v-if="goodsDetials.type!=3">商品售价
                        <span v-if="goodsDetials.price!=0.00">￥@{{goodsDetials.price}}</span>
                        <span v-else>免费</span>
                    </p>
                    <p class="detailPrice" v-else>商品售价
                        <span v-if="goodsDetials.price!=0.00">@{{goodsDetials.price}}<i style="font-size: 14px;font-style:normal;">积分</i></span>
                        <span v-else>免费</span>
                    </p>
                    <!-- <p class="details_name">
                        <span class="nameDetails">@{{goodsDetials.title}}</span>
                        <span @click="isCollect" v-if="goodsDetials.is_collect==1" class='soucangS'><img src="{{URL::asset('./img/huixing.png')}}">收藏</span>
                        <span @click="isCollect" v-else class='soucangS'><img src="{{URL::asset('./img/xingxing.png')}}"></span>
                    </p> -->
                    <!-- <p class="details_name" style="margin-top:30px;">
                        <span class="jiage" v-if="goodsDetials.type==3">
                            <a>积分：</a>
                            <span>
                            </span>
                            @{{goodsDetials.price}}
                        </span>
                        <span class="jiage" v-else>
                            <a>价格：</a>
                            ￥@{{goodsDetials.price}}
                        </span>
                    </p> -->
                    <p class="details_name1">
                        <span class='details_title_ss'>
                            <a>商品评分</a>
                            <img v-for="item in goodsDetials.star" src="{{URL::asset('./img/xingxing.png')}}">
                            <a style="margin-left:5px">@{{goodsDetials.star}}分</a>
                        </span>
                    </p>
                    <p class="details_name1">
                        <span class='details_title_ss'>
                            <a>商品属性</a>
                            <a v-if="goodsDetials.type == 1">非实物</a>
                            <a v-if="goodsDetials.type == 2">实物</a>
                            <a v-if="goodsDetials.type == 3">积分兑换</a>
                        </span>
                    </p>
                </div>
                <p class="payNumber">
                    <span style="display:flex; align-items: center;">
                        <a class='details_title_ss_a'>购买数量</a>
                        <span class="details_title_ss_div">
                            <span class="jian" @click="addGoodsNum('-')">
                                <img src="{{URL::asset('./img/icon/jian.png')}}">
                            </span>
                            <span class="contentNum">@{{goodsNum}}</span>
                            <span class="jia" @click="addGoodsNum('+')">
                                <img src="{{URL::asset('./img/icon/jia.png')}}">
                            </span>
                        </span>
                    </span>
                </p>
                <div class="btnBox">
                    <button class="shopping" @click=" window.location.href = '{{ route('home.order.sureOrder') }}?goodsId='+goodsDetials.id+'&num='+goodsNum+'&ifcart=0'">立即购买 </button>
                    <button class="shopping" v-if="goodsDetials.type!=3" style="background:#F49423" @click="addShoping">加入购物车 </button>
                    <button class="shopping" v-if="goodsDetials.is_collect==1" style="background:#fff;color:#FFA531;border:1px solid #FFA531;" @click="isCollect">收藏商品</button>
                    <button class="shopping" v-else style="background:#ccc;color:#fff" @click="isCollect">收藏商品</button>
                </div>
                <div class="fuwuMes">
                    <p>
                        <img src="{{URL::asset('./img/icon/serve.png')}}">
                        所有服务商，100%实名认证
                    </p>
                    <span>
                        1、为保障您的资金安全，请勿相信供应商任何理由的线下交易行为。
                    </span>
                    <p>2、所有非实物商品请联系启点网平台客服进行发货。</p>
                </div>
            </div>
        </div>
        <div class="details_content_right">
            <div style="width: 100%;height: 40px;background: rgba(209, 0, 24, 1);display: flex;padding: 10px;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);align-items: center;">
                <img style="width: 20px;height: 20px;margin-right: 10px;" src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">
                该商品发布供应商
            </div>
            {{--<div style="width: 100%;height: 40px;background: rgba(209, 0, 24, 1);display: flex;padding: 10px;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);align-items: center;" v-else>--}}
                {{--<img style="width: 20px;height: 20px;margin-right: 10px;" src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">--}}
                {{--该商品由平台发布--}}
            {{--</div>--}}

            <div class="showStore" style="height: auto;">

                <img :src="goodsDetialsStore.logo" alt="">
                <div class='showStore_name'>
                    <p class="title">@{{goodsDetialsStore.store_name}}</p>
                    <img v-if="goodsDetialsStore.quality==2" src="{{URL::asset('./img/icon/storeColloct.png')}}" alt="">
                    <img v-if="goodsDetialsStore.hot==2" src="{{URL::asset('./img/icon/storeHot.png')}}" alt="">
                </div>
                <p class="sc" style="text-align: left;font-size:12px;color:#999;margin-top:12px">擅长领域</p>
                <div class="sc_box" style="display: flex;flex-wrap: wrap;" v-if="goodsDetialsStore.cate_name">
                    <p style="display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 16px;
    border: 1px solid rgba(221,221,221,1);
    border-radius: 2px;
    font-size: 12px;
    color: #333;
    padding: 0 5px;
    margin-right: 5px;
    margin-top: 5px;" class="sc_text" v-for="(item,index) in goodsDetialsStore.cate_name" :key="index" v-if="index<4">@{{item.name}}</p>
                </div>
                <div class="plMsg">
                    <p class="text">浏览 @{{goodsDetialsStore.view}}</p>
                    <p class="text">来电咨询 @{{goodsDetialsStore.call}}</p>
                    <p class="text">好评 @{{goodsDetialsStore.credit}}%</p>
                </div>
                <div class="colletBox" style="display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: 20px;
    align-items: center;">
                    {{--<p class="storeCollect" @click="setCollect(detailsDataStore.id)" :class="{active:detailsDataStore.store_collect==2}">--}}
                    {{--<span v-if="detailsDataStore.store_collect==1">--}}
                    {{--<img src="{{URL::asset('./img/store/storeCollectFalse.png')}}" alt="">收藏服务商--}}
                    {{--</span>--}}
                    {{--<span v-if="detailsDataStore.store_collect==2">--}}
                    {{--已收藏--}}
                    {{--</span>--}}
                    {{--<span class="storeCollectNum">@{{detailsDataStore.collections}}</span>--}}
                    {{--</p>--}}

                    <button style="width: 115px;
    height: 36px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,165,49,1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #FFA531;" @click="window.location.href = '{{ route('home.store.store') }}?id='+goodsDetialsStore.id">
                        进入店铺
                    </button>
                    <p class="area">地址:@{{goodsDetialsStore.area}}</p>
                </div>

                {{--<div class="showStore_button">--}}
                    {{--<button style="position:relative" @click.stop="getQRcode(goodsDetialsStore)">--}}
                        {{--联系TA--}}
                        {{--<div class="listButtonDialog" v-show="goodsDetialsStore.bool" @click.stop="goodsDetialsStore.bool=false">--}}
                            {{--<div class="listButtonDialog_img">--}}
                                {{--<span>--}}
                                    {{--<img src="{{URL::asset('./img/store/listButtonDialog_img.png')}}" alt="">--}}
                                    {{--@{{goodsDetialsStore.link.master_phone}}--}}
                                {{--</span>--}}
                                {{--<p class="listButtonDialog_name"> @{{goodsDetialsStore.link.master_name}}</p>--}}
                                {{--<!-- <p class="listButtonDialog_tel">--}}
                                    {{--电话接通率：<a>--}}
                                        {{--100%--}}
                                    {{--</a>--}}
                                {{--</p> -->--}}
                            {{--</div>--}}
                            {{--<div class="listButtonDialog_QRcode">--}}
                                {{--<img :src="'http://api.online-service.vip/qr/create/phone?w=200&h=200&n='+goodsDetialsStore.link.master_phone+'&style=0'" alt="">--}}
                                {{--<span>扫码快速拨打电话</span>--}}
                                {{--<a>x</a>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</button>--}}
                    {{--<button v-if="goodsDetialsStore.store_collect==2" @click="storeCollect(goodsDetialsStore.id)" style="color: #cccc;border-color: #ccc;">已收藏</button>--}}
                    {{--<button v-else @click="storeCollect(goodsDetialsStore.id)">收藏店铺</button>--}}
                {{--</div>--}}
            </div>
            {{--<div style="display: flex;align-content: center;padding-top: 27px;flex-direction: column;align-items: center;background: #fff;">--}}
                {{--<img style="height: 100px;width: 100px;" :src="goodsDetialsStore.logo" alt="">--}}
                {{--<p style="font-size: 14px;--}}
    {{--font-family: Source Han Sans CN;--}}
    {{--font-weight: 400;--}}
    {{--color: rgba(51, 51, 51, 1);--}}
    {{--margin: 10px auto;">@{{goodsDetialsStore.store_name}}</p>--}}
                {{--<p style="font-size: 12px;--}}
                {{--font-family: Source Han Sans CN;--}}
                {{--font-weight: 400;--}}
                {{--color: rgba(153, 153, 153, 1);--}}
                {{--opacity: 1;">该活动由平台主办</p>--}}
            {{--</div>--}}
            <div class='detailsRightMain'>
                <div class='detialsRightTitle'>
                    <img src="{{URL::asset('./img/icon/recommend.png')}}">
                    同类型的推荐商品
                </div>
                <div class="stroreListDetails" v-for="(item,index) in RightHotGoods" @click=" window.location.href = '{{ route('home.goods.goodsDetails') }}?goodsId='+item.id+'&stairClassify='+stairClassify+'&type='+goodsType">
                    <img :src="item.thumb">
                    <div>
                        <p class="title">@{{item.title}}</p>
                        <p class="rightPrice">价格￥@{{item.price}}</p>
                        <div style="display:flex;font-size:12px;color:rgba(153,153,153,1);margin-top:7px">
                            <p style="margin-right:5px">成交@{{item.salenum}}</p>
                            <p style="margin-right:5px">浏览@{{item.view}}</p>
                            <p>好评@{{parseInt(item.credit)}}%</p>
                        </div>
                        <!-- <div>
                            <p class="stroreListDetailsP">
                                <span>
                                    <img src="{{URL::asset('./img/icon/eyered.png')}}">
                                    @{{item.view}}
                                </span>
                                <span>
                                    ￥<a>@{{item.price}}</a>
                                </span>
                            </p>
                        </div> -->
                    </div>
                    <!-- <button @click=" window.location.href = '{{ route('home.goods.goodsDetails') }}?goodsId='+item.id+'&stairClassify='+stairClassify+'&type='+goodsType">查看</button> -->
                </div>
            </div>
        </div>
    </div>
    <div class="details_content">
        <div class="details_content_left">
            <div class="content_title">
                <span :class="{active:evaluateBol}" @click="setevaluateBol(true)">详细信息</span>
                <span :class="{active:!evaluateBol}" @click='setevaluateBol(false)'>交易评价 @{{goodsDetials.sum}}</span>
            </div>
            <div class="content_main" v-if="evaluateBol">
                @{{goodsDetials.content}}<br>
                <img :src="item" style="width: 100%;" v-for="item in goodsDetials.images">

            </div>
            <div class="pingjia" v-else v-loading="loading1">
                <div class="companyTransaction_details">
                    <div class="TransactionHeader">
                        <div class="tsHeader">
                            <div :class="{active:evaluatesType==1}" @click="changeEvaluates(1)">
                                <img src="{{URL::asset('./img/store/well.png')}}" alt="">
                                <span>好评数<a>@{{goodsDetials.good}}</a></span>
                            </div>
                            <div :class="{active:evaluatesType==2}" @click="changeEvaluates(2)">
                                <img src="{{URL::asset('./img/store/middle.png')}}" alt="">
                                <span>中评数<a>@{{goodsDetials.middle}}</a></span>
                            </div>
                            <div :class="{active:evaluatesType==3}" @click="changeEvaluates(3)">
                                <img src="{{URL::asset('./img/store/bad.png')}}" alt="">
                                <span>差评数<a>@{{goodsDetials.bad}}</a></span>
                            </div>
                        </div>
                        <div class="tsMain">
                            <div v-for="item in goodsEvaluates">
                                <span class="userMes">
                                    <img :src="item.user_avatar">
                                    <a>@{{item.user_name}}</a>
                                </span>
                                <div class="userEvaluate">
                                    <span>
                                        <span class="userMes_case">
                                            <!-- <span>业务名称业务名称业务名称</span> -->
                                            <i class="tri" v-for="it in item.average_star"></i>
                                            <a>（@{{item.average_star}}分）</a>
                                        </span>
                                        <span>@{{item.created_at}}</span>
                                    </span>
                                    <div style="display:flex;margin:10px 0 5px 0" v-if="item.images">
                                        <img style="width:40px;height:40px;border-radius:4px;margin-right:5px;" v-for="item1 in item.images" :src="item1" alt="">
                                    </div>
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="elementPage" v-if="pageCount>0" style="margin:0 20px;margin-top:10px;padding-bottom:20px;border-bottom:1px solid #cccccc">
                    <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                    </el-pagination>
                </div>

            </div>
        </div>

    </div>
    <el-dialog :visible.sync="centerDialogVisible" width="508px" center>
        <div class="dialogMes">
            <img src="{{URL::asset('./img/icon/paying.png')}}" alt="">
            <span>商品已加入购物车</span>
        </div>
    </el-dialog>
</div>
@endsection
@section('scripts')
<script src="{{ asset('js/swiper3.3.1.min.js') }}" type="text/javascript"></script>
<script>
    $(() => {
        let app = new Vue({
            el: '#details',
            data: () => {
                return {
                    evaluatesType: 1,
                    goodsNum: 1,
                    pageNumber: 1,
                    pageCount: 0,
                    centerDialogVisible: false,
                    goodsId: getQueryString("goodsId") || '',
                    stairClassify: getQueryString("stairClassify") || '',
                    goodsType: getQueryString("type") || '',
                    evaluateBol: true,
                    goodsDetials: {},
                    goodsDetialsStore: {
                        link: {
                            master_phone: '',
                            master_name: '',
                        }
                    },
                    goodsEvaluates: [],
                    workPac: {
                        T: 0,
                        F: 5,
                    },
                    workContent: {
                        T: 0,
                        F: 5,
                    },
                    workManner: {
                        T: 0,
                        F: 5,
                    },
                    content: '',
                    RightHotGoods: [],
                    loading1: false,
                }
            },
            created() {
                //19-9-11 by z 评价跳转过来默认显示评价
                if({!! $is_evaluate !!}){
                    this.evaluateBol = false;
                }
                this.getDetails();
                this.getRightHotGoods();
            },
            mounted() {


            },
            methods: {
                swiperFun(){
                    setTimeout( function () {
                        var galleryTop = new Swiper('.gallery-top', {
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            spaceBetween: 10,
                            // autoplay:2000,
                        });

                        var galleryThumbs = new Swiper('.gallery-thumbs', {
                            spaceBetween: 10,
                            centeredSlides: true,
                            slidesPerView: 'auto',
                            touchRatio: 0.2,
                            slideToClickedSlide: true
                        });
                        // var galleryTop = new Swiper('.gallery-top', {
                        //     // spaceBetween: 10,
                        //     loop: true,
                        //     // loopedSlides: 5,
                        //     navigation: {
                        //         nextEl: '.swiper-button-next',
                        //         prevEl: '.swiper-button-prev',
                        //     },
                        //     observer: true, //修改swiper自己或子元素时，自动初始化swiper
                        //     observeParents: true, //修改swiper的父元素时，自动初始化swiper
                        //     // thumbs: {
                        //     //     swiper: galleryThumbs,
                        //     // },
                        // });
                        // var galleryThumbs = new Swiper('.gallery-thumbs', {
                        //     spaceBetween: 10,
                        //     slidesPerView: 4,
                        //     loop: true,
                        //     freeMode: true,
                        //     loopedSlides: 5,
                        //     observer: true, //修改swiper自己或子元素时，自动初始化swiper
                        //     observeParents: true, //修改swiper的父元素时，自动初始化swiper
                        //     watchSlidesVisibility: true,
                        //     watchSlidesProgress: true,
                        // });
                        galleryTop.params.control = galleryThumbs;
                        galleryThumbs.params.control = galleryTop;



                    }, 2000 )
                },

                getDetails() {
                    let data = {
                        id: this.goodsId,
                        type: this.evaluatesType,
                        page: this.pageNumber,
                    }
                    this.loading1 = true;
                    apiAjax("{{ route('home.goods.goodsDetailsApi')}}", 'get', data, (res) => {
                        this.loading1 = false;
                        if (res.code == 0) {
                            this.goodsDetials = res.data;
                            this.goodsDetialsStore = res.data.store;
                            this.goodsEvaluates = res.data.evaluates.data;
                            this.pageCount = res.data.evaluates.total;
                            this.swiperFun();

                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {
                        this.loading1 = false;

                    });
                },
                getRightHotGoods() {
                    let data = {
                        cid: this.stairClassify,
                        type: this.goodsType,
                    }
                    apiAjax("{{ route('home.goods.detailsRightHotGoodsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.RightHotGoods = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //商品收藏
                isCollect() {
                    let storeDetailData = {
                        collect_id: this.goodsDetials.id
                    }
                    apiAjax("{{ route('home.goods.goodsCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //供应商收藏
                storeCollect(id) {
                    let storeDetailData = {
                        collect_id: id
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },

                handleCurrentChange(val) {
                    this.pageNumber = val;
                },
                changeEvaluates(type) {
                    this.evaluatesType = type;
                    this.getDetails();
                },
                setevaluateBol(obj) {
                    this.evaluateBol = obj
                },
                addGoodsNum(type) {
                    if (type == '+') {
                        this.goodsNum += 1;
                    } else {
                        if (this.goodsNum <= 1) {

                        } else {
                            this.goodsNum -= 1;
                        }
                    }
                },
                addShoping() {
                    let data = {
                        store_id: this.goodsDetialsStore.id,
                        store_name: this.goodsDetialsStore.store_name,
                        goods_id: this.goodsDetials.id,
                        goods_name: this.goodsDetials.title,
                        goods_img: this.goodsDetials.thumb,
                        goods_price: this.goodsDetials.price,
                        num: this.goodsNum,
                        type: 1
                    }
                    apiAjax("{{ route('home.cart.cartAddApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.centerDialogVisible = true;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //点击获取电话转二维码
                getQRcode(item) {
                    if (sessionStorage.getItem("HRuserDetails") && JSON.parse(sessionStorage.getItem("HRuserDetails")).id) {
                        let HRuserDetails = JSON.parse(sessionStorage.getItem("HRuserDetails"))
                        if (HRuserDetails.type == 1) {
                            let data = {
                                phoneA: HRuserDetails.mobile,
                                store_id: item.id,
                            }
                            apiAjax("{{ route('home.phone.map')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    item.bool = true;
                                    item.link = res.data;
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            this.$message({
                                message: "您不是HR用户哦！！",
                                type: 'warning'
                            });
                        }

                    } else {
                        this.$message({
                            message: "请先登录",
                            type: 'warning'
                        });
                    }

                }
            }
        })
    })
</script>
@endsection